import { CockpitChartBaseProps } from "../helps";
import React from "react";

export interface KxProportionLeavingPeoplePresentPieChartProps
  extends CockpitChartBaseProps {
  img?: any;
  title?: string;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxProportionLeavingPeoplePresentPieChartOption = ({
  dataSource = [],
  img,
  title = "安全检查总次数",
}: KxProportionLeavingPeoplePresentPieChartProps): EChartsOption => {
  const total = dataSource.reduce((memo, cur) => {
    return memo + (cur.amount || 0);
  }, 0);
  const nameMap = dataSource.reduce<Record<string, number>>((memo, cur) => {
    if (cur.name) {
      memo[cur.name] = cur.amount || 0;
    }

    return memo;
  }, {});

  const color = ["#FEE409", "#2BE872", "#2CFFFF", "#7E00F3", "#FD850B"];

  return {
    grid: {
      left: 0,
    },
    title: [
      {
        text: "{val|" + total + "}\n{name|" + title + "}",
        top: "40%",
        left: "26%",
        textAlign: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              color: "#FDFFFF",
              fontFamily: "Arial",
              padding: [20, 0],
            },
            val: {
              fontSize: 24,
              fontFamily: "Arial",
              color: "#FDFFFF",
              fontWeight: "bold",
            },
          },
        },
      },
    ],

    color: color,

    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 138,
            height: 138,
          },
          left: "14.5%",
          top: "center",
        },
      ],
    },
    tooltip: {
      show: false,
    },
    legend: {
      right: "0%",
      top: "25%",
      left: "50%",
      data: dataSource.map((item) => item.name || ""),
      icon: "circle",
      formatter: (params) => {
        const value = nameMap[params];
        if (total === 0) {
          return `{a|${params} }{b|0%}{c|${value}}`;
        }
        const name = params;
        return `{a|${name} }{b|${((value * 100) / total).toFixed(
          0
        )}%}{c|${value}}`;
      },
      textStyle: {
        rich: {
          a: {
            color: "#FDFFFF",
            width: 100,
            fontSize: 14,
            align: "left",
            fontFamily: "Arial",
          },
          b: {
            color: "#FDFFFF",
            fontSize: 14,
            width: 56,
            fontFamily: "Arial",
          },
          c: {
            color: "#FDFFFF",
            fontSize: 14,
            fontFamily: "Arial",
          },
        },
      },

      itemHeight: 8,
      itemWidth: 16,
      itemGap: 25,
      itemStyle: {
        color: "",
        borderColor: "inherit",
        borderWidth: 2,
        borderType: "solid",
      },
    },
    toolbox: {
      show: false,
    },
    series: [
      {
        name: "",
        type: "pie",
        clockwise: false,
        radius: [95, 99],
        // width:80,
        // radius: ['70%', '75%'],
        center: ["27%", "50%"],

        label: {
          show: false,
        },
        data: dataSource.map((d, index) => {
          return {
            value: d.amount || 0,
            name: d.name || "",
            itemStyle: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[index],
              shadowColor: color[index],
            },
          };
        }),
      },
    ],
  };
};

const KxProportionLeavingPeoplePresentPieChart = ({
  reactEChartsProps,
  dataSource,
  img,
  height = "354px",
  title = "title",
}: KxProportionLeavingPeoplePresentPieChartProps) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: height,
      }}
      option={getKxProportionLeavingPeoplePresentPieChartOption({
        dataSource,
        img,
        title,
      })}
    />
  );
};

export default KxProportionLeavingPeoplePresentPieChart;
